<script setup lang="ts">
import * as Icon from "@icon-park/vue-next";
import {MyCat} from "@/interfaces/apiResponse.ts";
const {cat} = defineProps<{
    cat:MyCat
}>()
</script>

<template>
  <section class="item" >
    <h4> <component :is="Icon[cat.icon!]" />&nbsp;{{cat.title}}</h4>
    <div class="buttons">
      <el-button type="primary" size="small" @click="$router.push({name:'cat.edit',params:{c_id:cat.id}})">
        <icon-editor />&nbsp;编辑</el-button>
      <el-button type="danger" size="small" @click="$emit('del', cat.id)">
        <icon-delete />&nbsp;删除</el-button>
    </div>
  </section>
</template>

<style lang="scss" scoped>
section.item{
  @apply border border-cyan-600 p-3 rounded flex flex-col
  justify-center items-center gap-3 shadow cursor-pointer hover:bg-green-100 duration-300;
  h4{
    @apply flex justify-center items-center text-slate-600;
  }
  div.buttons{

  }
}
</style>